//从本地获取用户名
renderUser()
//每次进入页面都先判断有无token
checkLogin()
//退出
logout()

// 显示弹框
// const modalDom = document.querySelector('#modal')
// const modal = new bootstrap.Modal(modalDom)

//获取模态框
const modalDom = document.querySelector('#modal')
//实例化
const modal = new bootstrap.Modal(modalDom)
//show显示 hide隐藏
//监听显示和隐藏 需要绑定事件 事件类型 ‘show.ba.modal’ 显示触发‘hide.ba.modal’ 隐藏触发
//监听模态框的隐藏和现实
// document.querySelector('#openModal').addEventListener('click', function () {
//     //显示模态框
//     modal.show()
// })
// modalDom.addEventListener('show.bs.modal', event => {
//     console.log('modal显示了');
// })
// modalDom.addEventListener('hide.bs.modal', event => {
//     console.log('modal隐藏了');
// })
// 数据增删改查
const list = document.querySelector('.list')
async function render() {
    const { data } = await axios.get('/students')
    list.innerHTML = data.map(item => {
        return `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender ? '女' : '男'}</td>
          <td>${item.group}</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province}${item.city}${item.area}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
            </td>
            </tr> 
        `
    }).join('')
    document.querySelector('.total').innerHTML = data.length
}
render()

const proSelect = document.querySelector('[name=province]')
const citSelect = document.querySelector('[name=city]')
const areaSelect = document.querySelector('[name=area]')
//初始化省市区
let p = ''
async function initSelect() {
    //显示省份
    const { list } = await axios.get('/api/province')
    const html1 = list.map(item => {
        return `
        <option value="${item}">${item}</option>
        `
    }).join('')
    proSelect.innerHTML = ` <option>--省份--</option>` + html1

    //切换省份 显示对应的城市
    proSelect.addEventListener('change', async function (e) {
        p = e.target.value
        const { list } = await axios.get(`/api/city?pname=${e.target.value}`)
        const html2 = list.map(item => {
            return `
        <option value="${item}">${item}</option>
        `
        }).join('')
        citSelect.innerHTML = ` <option>--城市--</option>` + html2
        //切换省份数据 还原地区
        areaSelect.innerHTML = ` <option>--地区--</option>`
    })

    //切换城市 显示对应的地区
    citSelect.addEventListener('change', async function (e) {
        const { list } = await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
        const html3 = list.map(item => {
            return `
        <option value="${item}">${item}</option>
        `
        }).join('')
        areaSelect.innerHTML = ` <option>--地区--</option>` + html3
    })
}
initSelect()

let rowId
//添加业务
document.querySelector('#openModal').addEventListener('click', function () {
    rowId = null
    modal.show()
})
//编辑业务
list.addEventListener('click', async function (e) {
    if (e.target.classList.contains('bi-pen')) {
        rowId = e.target.dataset.id
        //数据回显
        //1.数据请求 拿到点击的数据
        const { data } = await axios.get(`/students/${rowId}`)
        //2.给标签绑定数据
        //2.1 给有规则的表单进行赋值（回显）
        const resArr = ['name', 'age', 'salary', 'group', 'hope_salary']
        resArr.forEach(item => {
            document.querySelector(`[name=${item}]`).value = data[item]
        })
        //2.2 给性别进行赋值（回显）
        const genders = document.querySelectorAll('[name=gender]')
        genders[data.gender].checked = true
        //2.3 给籍贯进行赋值（回显）
        const { province, city, area } = data
        //回显省份
        proSelect.value = province
        //回显城市
        const { list: list1 } = await axios.get(`/api/city?pname=${province}`)
        const html2 = list1.map(item => {
            return `
        <option value="${item}">${item}</option>
        `
        }).join('')
        citSelect.innerHTML = ` <option>--城市--</option>` + html2
        //回显
        //省市区下拉菜单回显，首先下拉菜单有数据（省城区），给对应的标签设置value值
        citSelect.value = city
        //回显地区
        const { list: list2 } = await axios.get(`/api/area?pname=${province}&cname=${city}`)
        const html3 = list2.map(item => {
            return `
        <option value="${item}">${item}</option>
        `
        }).join('')
        areaSelect.innerHTML = ` <option>--地区--</option>` + html3
        //回显
        //省市区下拉菜单回显，首先下拉菜单有数据（省城区），给对应的标签设置value值
        areaSelect.value = area
        modal.show()

    }
    if (e.target.classList.contains('bi-trash')) {
        const id = e.target.dataset.id
        const flag = confirm('您确定要删除吗')
        //console.log(flag)  true 确定 false 取消
        if (flag) {
            //删除数据
            await axios.delete(`/students/${id}`)
            //提示
            showToast('删除成功')
            //渲染
            render()
        }
    }
})
//点击确定按钮 添加和编辑
const form = document.querySelector('#form')
document.querySelector('#submit').addEventListener('click', async function () {
    //判断是添加还是编辑
    if (rowId) {
        //编辑
        //1.收集用户的信息
        const data = serialize(form, { hash: true, empty: true })
        //2.处理数据
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary
        //3.提交数据
        await axios.put(`/students/${rowId}`, data)
        //4.提示用户
        showToast('编辑成功~')
        //5.重新渲染
        render()
    } else {
        //添加
        //1.收集用户的信息
        const data = serialize(form, { hash: true, empty: true })
        //2.处理数据
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary
        //3.提交数据
        await axios.post('/students', data)
        //4.提示用户
        showToast('添加成功~')
        //5.重新渲染
        render()
    }
    modal.hide()
})

//事件监听
modalDom.addEventListener('show.bs.modal', event => {
    document.querySelector('.modal-title').innerHTML = rowId ? '编辑学员' : '添加学员'
})
modalDom.addEventListener('hide.bs.modal', event => {
    form.reset()
})